<template>
  <div id="app">
    <div data-v-ac4e4544="">
      <!---->
      <div data-v-ac4e4544="" class="mint-popup popup" style="display: none">
        <div data-v-ac4e4544="" class="popup-close">
          <img
            data-v-ac4e4544=""
            src="https://images.yaodouwang.com/img/common/popup_close.png"
            alt="关闭"
          />
        </div>
        <div data-v-ac4e4544="" class="popup-content">
          <div data-v-ac4e4544="" class="popup-img">
            <img
              data-v-ac4e4544=""
              src="https://images.yaodouwang.com/img/common/ewm.png"
              alt="二维码"
            />
          </div>
        </div>
      </div>
    </div>
    <!---->
    <!---->
    <div data-v-8c0a4de6="" class="classify">
      <div data-v-8c0a4de6="" class="classify-search">
        <router-link
          to="/search"
          data-v-8c0a4de6=""
          class="search-content"
          tag="div"
        >
          <span data-v-8c0a4de6="" class="font-px30 color-999"
            >请输入药品、症状、品牌</span
          >
        </router-link>
      </div>
      <div data-v-8c0a4de6="" class="classify-contain">
        <div data-v-8c0a4de6="" class="classify-type">
          <ul data-v-8c0a4de6="">
            <li
              data-v-8c0a4de6=""
              :class="item.categoryId == num ? 'active-type' : ''"
              v-for="(item, index) in childLeftData"
              :key="item.categoryId"
              @click="handSend(item.categoryId)"
            >
              <span data-v-8c0a4de6="" v-if="index != 0">{{
                item.categoryName
              }}</span>
              <span data-v-8c0a4de6="" class="icon" v-if="index == 0">
                <img
                  data-v-8c0a4de6=""
                  :src="
                    num == 0
                      ? ''
                      : ''
                  "
                />
              </span>
            </li>
          </ul>
        </div>
        <div data-v-8c0a4de6="" class="classify-content">
          <div data-v-8c0a4de6="" class="classify-ad">
            <img
              data-v-8c0a4de6=""
              src="https://ydw-b2c.oss-cn-beijing.aliyuncs.com/20210603/47ecb50213bc443f9e3537268d72346a.png"
              alt="广告"
              style="width: 532px; height: 176px; border-radius: 20px"
            />
          </div>

          <div data-v-8c0a4de6="" class="classify-list">
            <div
              data-v-8c0a4de6=""
              class="classify-list-item"
              v-for="item in childTopData"
              :key="item.categoryId"
              @click="handJump(`/FindMeChildMid/${item.categoryId}`)"
            >
              <div data-v-8c0a4de6="" class="item-img">
                <img
                  data-v-8c0a4de6=""
                  :src="item.imageUrl"
                  :alt="item.categoryName"
                />
              </div>
              <div data-v-8c0a4de6="" class="item-name">
                {{ item.categoryName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../utils/request.js";
export default {
  data() {
    return {
      childTopData: [],
      childLeftData: [],
      num: 0,
    };
  },
  created() {
    this.num = this.$route.params.id;
    request({
      url: `/yd/product/category/findProductCategoryList?categoryId=${this.$route.params.id}`,
      method: "GET",
    }).then((res) => {
      this.childTopData = res.data.data.categorys;
      this.childLeftData = res.data.data.categoryList;
    });
  },
  methods: {
    handSend(id) {
      this.num = id;
      request({
        url: `/yd/product/category/findProductCategoryList?categoryId=${id}`,
        method: "GET",
      }).then((res) => {
        this.childTopData = res.data.data.categorys;
        this.childLeftData = res.data.data.categoryList;
      });
    },
    handJump(target) {
      this.$router.push(target);
    },
  },
};
</script>